<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <view class="header">
      <text class="title">菜品列表</text>
    </view>
    
    <!-- 主内容区 -->
    <view class="content">
      <!-- 日期选择器 -->
      <view class="date-selector">
        <view class="date-nav">
          <view class="date-arrow" @click="changeDate(-1)">
            <text class="iconfont">&#xe6a0;</text>
          </view>
          <view class="date-info">
            <view class="date-month">{{ currentMonth }}月</view>
            <view class="date-day">
              <text>今日</text>
              <text class="date-highlight">{{ currentDay }}日</text>
              <text>{{ weekDay }}</text>
            </view>
          </view>
          <view class="date-arrow" @click="changeDate(1)">
            <text class="iconfont">&#xe6a1;</text>
          </view>
        </view>
      </view>
      
      <!-- 分类筛选 -->
      <view class="filter-section">
        <text class="section-title">菜品列表</text>
        <view class="filter-tabs">
          <view 
            v-for="(tab, index) in tabs" 
            :key="index" 
            :class="['filter-tab', activeTab === index ? 'active-tab' : '']"
            @click="activeTab = index"
          >
            {{ tab }}
          </view>
        </view>
      </view>
      
      <!-- 菜品列表 -->
      <view class="dish-list">
        <view 
          class="dish-card" 
          v-for="(dish, index) in filteredDishes" 
          :key="index"
          @click="navigateToDetail(dish.id)"
        >
          <image class="dish-image" :src="dish.image" mode="aspectFill"></image>
          <view class="dish-info">
            <text class="dish-name">{{ dish.name }}</text>
            <view class="dish-rating">
              <text class="rating-star" v-for="i in 5" :key="i">
                {{ i <= Math.floor(dish.rating) ? '★' : (i - 0.5 <= dish.rating ? '★' : '☆') }}
              </text>
              <text class="rating-score">{{ dish.rating }}</text>
            </view>
            <text class="dish-chef">{{ dish.chef }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部导航 -->
    <view class="tab-bar">
      <view class="tab-item" @click="switchTab('/pages/index/index')">
        <text class="tab-icon">&#xe6b0;</text>
        <text class="tab-label">首页</text>
      </view>
      <view class="tab-item active">
        <text class="tab-icon">&#xe6b1;</text>
        <text class="tab-label">菜品</text>
      </view>
      <view class="tab-item" @click="switchTab('/pages/user/profile')">
        <text class="tab-icon">&#xe6b2;</text>
        <text class="tab-label">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      activeTab: 0,
      tabs: ['早餐', '午餐', '晚餐'],
      dishes: [
        {
          id: 1,
          name: '现磨豆浆',
          rating: 4.5,
          chef: '张师傅',
          image: 'https://images.unsplash.com/photo-1551326844-4df70f78d0e9?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
          type: 0 // 早餐
        },
        {
          id: 2,
          name: '肉包子',
          rating: 4.0,
          chef: '李师傅',
          image: 'https://images.unsplash.com/photo-1586190848861-99aa4a171e90?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
          type: 0 // 早餐
        },
        {
          id: 3,
          name: '现炸油条',
          rating: 3.5,
          chef: '王师傅',
          image: 'https://images.unsplash.com/photo-1625938144207-a17d8b3b0743?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
          type: 0 // 早餐
        },
        {
          id: 4,
          name: '鲜肉小笼包',
          rating: 5.0,
          chef: '赵师傅',
          image: 'https://images.unsplash.com/photo-1515543904379-3d757afe72e4?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
          type: 0 // 早餐
        },
        {
          id: 5,
          name: '手工煎饼',
          rating: 4.0,
          chef: '钱师傅',
          image: 'https://images.unsplash.com/photo-1623595119708-26b1f7500cca?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
          type: 0 // 早餐
        },
        {
          id: 6,
          name: '红烧排骨',
          rating: 4.8,
          chef: '孙师傅',
          image: 'https://images.unsplash.com/photo-1625938144207-a17d8b3b0743?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
          type: 1 // 午餐
        },
        {
          id: 7,
          name: '宫保鸡丁',
          rating: 4.2,
          chef: '周师傅',
          image: 'https://images.unsplash.com/photo-1525755662778-989d0524087e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
          type: 1 // 午餐
        },
        {
          id: 8,
          name: '清蒸鱼',
          rating: 4.6,
          chef: '吴师傅',
          image: 'https://images.unsplash.com/photo-1611489142329-5f62cfa43e6e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3',
          type: 2 // 晚餐
        }
      ]
    }
  },
  computed: {
    currentMonth() {
      return this.currentDate.getMonth() + 1;
    },
    currentDay() {
      return this.currentDate.getDate();
    },
    weekDay() {
      const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      return weekDays[this.currentDate.getDay()];
    },
    filteredDishes() {
      return this.dishes.filter(dish => dish.type === this.activeTab);
    }
  },
  methods: {
    changeDate(offset) {
      const newDate = new Date(this.currentDate);
      newDate.setDate(newDate.getDate() + offset);
      this.currentDate = newDate;
    },
    navigateToDetail(id) {
      uni.navigateTo({
        url: `/pages/dish/detail?id=${id}`
      });
    },
    switchTab(url) {
      uni.navigateTo({
        url: url
      });
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #FAFAFA;
}

.header {
  padding: 40rpx;
  background-color: #FF7A45;
}

.title {
  color: #FFFFFF;
  font-size: 36rpx;
  font-weight: bold;
}

.content {
  flex: 1;
  padding: 30rpx;
  overflow-y: auto;
}

.date-selector {
  margin-bottom: 30rpx;
}

.date-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.date-arrow {
  font-family: "iconfont";
  color: #8C8C8C;
  font-size: 40rpx;
}

.date-info {
  text-align: center;
}

.date-month {
  font-size: 24rpx;
  color: #8C8C8C;
}

.date-day {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 10rpx;
}

.date-highlight {
  color: #FF7A45;
  margin: 0 10rpx;
}

.filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #262626;
}

.filter-tabs {
  display: flex;
  gap: 20rpx;
}

.filter-tab {
  padding: 10rpx 30rpx;
  background-color: #F0F0F0;
  color: #595959;
  border-radius: 30rpx;
  font-size: 28rpx;
}

.active-tab {
  background-color: #FF7A45;
  color: #FFFFFF;
  box-shadow: 0 4rpx 8rpx rgba(255, 122, 69, 0.25);
}

.dish-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.dish-card {
  display: flex;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.dish-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
  object-fit: cover;
}

.dish-info {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dish-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #262626;
}

.dish-rating {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.rating-star {
  color: #FFA940;
  font-size: 28rpx;
}

.rating-score {
  margin-left: 10rpx;
  color: #8C8C8C;
  font-size: 24rpx;
}

.dish-chef {
  margin-top: 10rpx;
  color: #595959;
  font-size: 28rpx;
}

.tab-bar {
  display: flex;
  height: 100rpx;
  background-color: #FFFFFF;
  border-top: 1rpx solid #F0F0F0;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8C8C8C;
}

.tab-item.active {
  color: #FF7A45;
}

.tab-icon {
  font-family: "iconfont";
  font-size: 44rpx;
}

.tab-label {
  font-size: 24rpx;
  margin-top: 6rpx;
}
</style> 